import { UploadOutlined } from "@ant-design/icons";
import ProForm, { DrawerForm, ProFormDateRangePicker, ProFormDigit, ProFormGroup, ProFormSelect, ProFormText, ProFormTextArea } from "@ant-design/pro-form"
import { PageContainer } from "@ant-design/pro-layout"
import ProTable, { ProColumns } from "@ant-design/pro-table"
import { Button, Upload } from "antd";
import { useState } from "react";

export default () => {
  const [activeKey,setActiveKey] = useState("tab1");
  const [showDetail,setShowDetail] = useState(false);
  const columns:ProColumns[] = [
    {
      title:'活动总结名称',
      dataIndex: 'name11',
      ellipsis:true,
      width:150,
      hideInSearch:true,
      renderText:()=>'XXXXX活动总结'
    },
    {
      title:'总结名称',
      dataIndex: 'name11',
      ellipsis:true,
      width:150,
      renderText:()=>'XXXXX活动总结'
    },
    {
      title:'年度预算名称',
      dataIndex: 'date4',
      hideInSearch:true,
      width:150,
      renderText:()=>'2023年度'
    },
    {
      title:'年度预算金额',
      dataIndex: 'date5',
      hideInSearch:true,
      valueType:'money',
      width:130,
      renderText:()=>'1000000'
    },
    {
      title:'活动类型',
      dataIndex: 'name2',
      width:100,
      hideInSearch:true,
      renderText:()=>'展会'
    },
    {
      title:'申请金额',
      dataIndex: 'money1',
      width:100,
      valueType:'money',
      hideInSearch:true,
      renderText:()=>'70000'
    },
    {
      title:'实际发生金额',
      dataIndex: 'money2',
      width:100,
      valueType:'money',
      hideInSearch:true,
      renderText:()=>'80000'
    },
    {
      title:'覆盖客户人数',
      dataIndex: 'money3',
      width:100,
      hideInSearch:true,
      renderText:()=>'60'
    },
    {
      title:'创建日期',
      dataIndex: 'createDate',
      width:100,
      hideInSearch:true,
      renderText:()=>'2023-05-01'
    },
    {
      title: "操作",
      valueType: 'option',
      fixed:'right',
      width:100,
      render: (text, record:any,_, action) => [
       <a key="b2" onClick={()=>setShowDetail(true)}>详情</a>
      ]
    }
  ]

  return (
    <PageContainer>
           <ProTable
      headerTitle=''
      pagination={{
        pageSizeOptions:['20', '100', '500']
      }}
      toolBarRender={() => [
        <Button
          type="primary"
          key="primary"
          onClick={() => {
            setShowDetail(true)
          }} >新建</Button>]
        }
        dataSource={[{},{},{},{},{}]}
        scroll={{x:1300}}
      columns={columns}
      rowKey="id"
  
      toolbar={{
        settings: [],
      }}
      />
      <DrawerForm title='详情' width={1200} visible={showDetail}  onVisibleChange={v=>{setShowDetail(v)}}  drawerProps={{
          destroyOnClose:true,
          forceRender:true
        }}>
          <div style={{backgroundColor:'#f0f0f0',color:'#448ef7',padding:'5px 10px',marginBottom:10}}>基本信息</div>
          <ProFormGroup>
            <ProFormText name="name111" width={'md'} label="活动总结名称" rules={[{ required: true}]}/>
            <ProFormSelect name="name62" width={'md'} label="年度预算名称" options={[{label:'2023年度预算',value:'0'}]} />
            <ProFormSelect name="name61" width={'md'} label="所属市场活动"  mode='multiple'  options={[{label:'活动A',value:'0'}]} />
            <ProFormDigit name="name63" width={'md'} label="实际发生金额" />
            <ProFormText name="name64" width={'md'} label="超出预算原因" />
          </ProFormGroup>
          <div style={{backgroundColor:'#f0f0f0',color:'#448ef7',padding:'5px 10px',marginBottom:10}}>活动目标</div>
          <ProFormGroup>
            <ProFormSelect name="name65" width={'md'} label="新客户咨询" options={[{label:'20人以下',value:'0'},{label:'20-49人',value:'1'},{label:'50-99人',value:'2'},{label:'100人以上',value:'3'}]} />
            <ProFormSelect name="name66" width={'md'} label="资料派发" options={[{label:'20人以下',value:'0'},{label:'20-49人',value:'1'},{label:'50-99人',value:'2'},{label:'100人以上',value:'3'}]} />
            <ProFormSelect name="name67" width={'md'} label="产品手术展示" options={[{label:'是',value:'0'},{label:'否',value:'1'}]} />
            <ProFormDigit name="name68" width={'md'} label="产品手术展示次数" />
            <ProFormSelect name="name69" width={'md'} label="专题讨论" options={[{label:'是',value:'0'},{label:'否',value:'1'}]} />
            <ProFormDigit name="name691" width={'md'} label="专题讨论次数" />
            <ProFormSelect name="name692" width={'md'} label="讨论主题" mode='multiple' options={[{label:'产品讨论',value:'0'},{label:'调研',value:'1'}]} />
            <ProFormDigit name="name6993" width={'md'} label="覆盖客户人数" />
          </ProFormGroup>
          <div style={{backgroundColor:'#f0f0f0',color:'#448ef7',padding:'5px 10px',marginBottom:10}}>会议总结</div>
          <ProFormGroup>
           <ProFormText name="name91" width={'md'} label="会议亮点" />
           <ProFormText name="name92" width={'md'} label="会议待改进项" />
           <ProFormSelect name="name93" width={'md'} label="会议自评分" options={[{label:'1',value:'1'},{label:'2',value:'2'},{label:'3',value:'3'},{label:'4',value:'4'},{label:'5',value:'5'}]}/>

          </ProFormGroup>
        
          <div style={{height:20}}></div>
          <ProFormTextArea name="name101" width={'lg'} label="活动说明" rules={[{ required: true}]}/>
          <ProFormTextArea name="name11" width={'lg'} label="备注" />
      </DrawerForm>
    </PageContainer>)
}